<!--
 * @Descripttion: 
 * @version: 
 * @Author: 
 * @Date: 2019-09-17 17:31:02
 -->
<template>
  <div id="home">
    <el-scrollbar :native="false"
                  tag="section"
                  class="el-scroll">
      <div class="homeTitle">
        <h1>福州市业务系统关系拓扑</h1>
        <div class="homeTitleTime">
          版本时间：
          <el-date-picker v-model="Versiontime"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd"
                          @change="VersiontimeChange">
          </el-date-picker>
        </div>
        <div class="homeTitleSearch">
          <el-input placeholder="请输入关键词"
                    v-model="name"
                    @keyup.enter.native="changeName">
          </el-input>
          <el-button @click="changeName">搜索</el-button>
        </div>
      </div>
      <div class="homeMap">
        <div class="homeTabs">
          <i class="is-collapse iconfont"
             :class="{ 'iconzhankai':!getIsHomeTab,'iconshousuo':getIsHomeTab}"
             @click.stop="setIsHomeTab(!getIsHomeTab)"></i>
          <el-tabs value="first"
                   v-show="getIsHomeTab"
                   class="homeCon">
            <el-tab-pane label="业务流程"
                         name="first">
              <el-scrollbar :native="false"
                            tag="section"
                            class="el-scroll"
                            style="height:400px">
                <div class="title"
                     :class='["title",name == item.busiProceName ? "titleActive" : ""]'
                     v-for="item in businessProcessData"
                     :key="item.versionId"
                     :value="item.busiProceName"
                     @click="checkMetaData(item.busiProceName)">{{item.busiProceName}}</div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="业务系统"
                         name="second">
              <el-scrollbar :native="false"
                            tag="section"
                            class="el-scroll"
                            style="height:400px">
                <div class="title"
                     :class='["title",name == item.system_name ? "titleActive" : ""]'
                     v-for="item in businessSystem"
                     :key="item.system_id"
                     :value="item.system_name"
                     @click="checkMetaData(item.system_name)">{{item.system_name}}</div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="组织机构"
                         name="third">
              <el-scrollbar :native="false"
                            tag="section"
                            class="el-scroll"
                            style="height:400px">

                <div class="title"
                     :class='["title",name == item.name ? "titleActive" : ""]'
                     v-for="item in organization"
                     :key="item.catalogId"
                     :value="item.name"
                     @click="checkMetaData(item.name)">{{item.name}}</div>
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </div>

        <div id="main"
             style="display:inline-block;width:100%;height:650px">
        </div>
        <div id='main_1'
             style=""></div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
import echarts from 'echarts'
import apiHome from '@/httpUtils/apiHome'
import { mapGetters, mapActions } from 'Vuex';
// import 
export default {
  name: "homeView",
  data () {
    return {
      data: [],
      links: [],
      Versiontime: '',
      name: '',
      businessProcessData: [],
      businessSystem: [],
      organization: []
    }
  },
  props: {
    options: {
      type: Array,
      default: []
    },
    value: {
      type: Array,
      default: []
    },
    list: {
      type: Array,
      default: []
    },
    loading: {
      type: Boolean,
      default: false
    },
    states: {
      type: Array,
      default: []
    },
  },
  filters: {

  },
  computed: {
    ...mapGetters(['getIsHomeTab'])
  },
  watch: {
    //  搜索框选中

  },

  created () {


  },
  mounted () {
    this.getData()
  },
  methods: {
    ...mapActions(['setIsHomeTab']),
    VersiontimeChange (date) {
      // console.log('时间', this.Versiontime)
      this.getData()
    },
    //  点击tabs标签
    checkMetaData (name) {
      console.log('tabs标签数据', this.name)
      this.name = name
      // this.getData()
      //  获取关系数据
      apiHome.findCataAllRelation({ date: this.Versiontime, name: this.name }).then(res => {
        (res.data.data).map((value, index, array) => {
          if (value.symbolSize && typeof (value.length) != 'string') {
            value.symbolSize = JSON.parse(value.symbolSize)
          }
          return value
        })
        // res.data.data.map()
        this.links = res.data.data
        console.log('links', this.links)
        //  获取echart节点数据
        apiHome.findCataAll({ date: this.Versiontime, name: this.name }).then(res => {
          // console.log('11111111', option.series.data)
          //  过滤掉重复的name
          let arr = res.data.data
          var hash = {};
          arr = arr.reduce(function (item, next) {
            hash[next.name] ? '' : hash[next.name] = true && item.push(next);
            return item
          }, [])
          this.data = arr
          console.log('data', this.data)
          this.drawLine()
        })
      })
    },
    changeName (name) {
      this.getData()
    },
    drawLine () {
      var myChart = echarts.init(document.getElementById('main'), 'macarons');


      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          show: true, //默认显示
          showContent: true, //是否显示提示框浮层
          trigger: 'item', //触发类型，默认数据项触发
          triggerOn: 'mousemove', //提示触发条件，mousemove鼠标移至触发，还有click点击触发
          alwaysShowContent: false, //默认离开提示框区域隐藏，true为一直显示
          showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
          hideDelay: 200, //浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
          enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          position: 'right', //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
          confine: false, //是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
          transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
          //  到数据库去请求链接
          // formatter: function (params, ticket, callback) {
          //   //判断数据，提供相应的url。
          //   var path = "";
          //   var node = params.data; //当前选中节点数据
          //   var category = params.data.category; //选中节点图例0负载 1中间件 2端口号 3数据库 4用户名 
          //   if (category == 2) { //为jvm 虚拟机各类参数的路径
          //     path = "${ctx}/weblogic.do?host=" + node.host + "&port=" +
          //       node.port + "&username=" + node.username +
          //       "&pwd=" + node.pwd; //准备访问路径
          //   } else if (category == 4) { //为jdbc 数据库的路径
          //     path = "${ctx}/oracle.do?host=" + node.host + "&port=" +
          //       node.port + "&username=" + node.username +
          //       "&pwd=" + node.pwd + "&instance=" +
          //       node.instance; //准备访问路径
          //   }

          //   $.ajax({
          //     async: true, //设置异、同步加载
          //     cache: false, //false就不会从浏览器缓存中加载请求信息了
          //     type: 'post',
          //     dataType: "json",
          //     url: path, //请求的action路径  
          //     success: function (data) { //请求成功后处理函数。    
          //       //加工返回后的数据
          //       debugger;
          //       if (category == 2) { //当选择端口号时
          //         var res = 'jvm最大内存值:' + data.memoryMaxSize + '<br/>';
          //         res += 'jvm空闲内存值:' + data.memoryFreeSize + '<br/>';
          //         res += 'jvm内存使用率：' + data.memoryPer + '<br/>';
          //         res += '空闲线程：' + data.ideThread + '<br/>';
          //         res += '总线程：' + data.totalThread + '<br/>';
          //         res += '每秒处理的线程数比率：' + data.throuhput + '<br/>';
          //         callback(ticket, res);
          //       } else if (category == 4) { //当选择用户名时
          //         var res = '当前链接数：' + data.processCount + '<br/>';
          //         res += '最大链接数：' + data.maxProcessCount + '<br/>';
          //         callback(ticket, res);
          //       }

          //     },
          //     error: function () { //请求失败处理函数  
          //       $.messager.alert('警告', '请求失败！', 'warning');
          //     }
          //   });
          //   if (category == 2 || category == 4) { //当选择端口号与用户名时提示加载
          //     return "loading";
          //   } else { //其他情况显示所属图例以及名称
          //     return myChart.getOption().series[params.seriesIndex].categories[params.data.category]
          //       .name + ":" + params.name;
          //   }

          // }
        },
        legend: { //=========圖表控件
          show: true,
          data: [{
            name: '业务流程',
            icon: 'circle' //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          },
          {
            name: '业务系统',
            icon: 'circle'
          }, {
            name: '组织机构',
            icon: 'circle'
          }
          ]
        },
        series: [{
          type: 'graph', //关系图
          name: "福州市业务系统关系拓扑", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
          layout: 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
          legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。
          hoverAnimation: false, //是否开启鼠标悬停节点的显示动画
          coordinateSystem: null, //坐标系可选
          xAxisIndex: 0, //x轴坐标 有多种坐标系轴坐标选项
          yAxisIndex: 0, //y轴坐标 
          force: { //力引导图基本配置
            //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
            repulsion: 300, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
            gravity: 0.08, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
            edgeLength: 50, //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
            layoutAnimation: true
            //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。                        
          },
          roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          nodeScaleRatio: 0.6, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
          draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。
          focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
          symbol: 'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）  也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
          symbolSize: 10,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array
          symbolRotate: 'arrow',//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
          symbolOffset: [0, 0],//关系图节点标记相对于原本位置的偏移。[0, '50 % ']
          edgeSymbol: ['arrow', 'none'], //边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
          edgeSymbolSize: [0, 0], //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
          itemStyle: { //===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
            normal: { //默认样式
              label: {
                show: true
              },
              borderType: 'dotted', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
              borderColor: 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4
              borderWidth: 2, //图形的描边线宽。为 0 时无描边。
              opacity: 1
              // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
            },
            emphasis: { //高亮状态

            }
          },
          lineStyle: { //==========关系边的公用线条样式。
            normal: {
              color: '#1a243e',
              width: '2',
              type: 'dashed', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
              curveness: 0.2, //线条的曲线程度，从0到1
              opacity: 0.8
              // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
            },
            emphasis: { //高亮状态
              color: '#1a243e',
              width: '3',
              type: 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
              curveness: 0.1, //线条的曲线程度，从0到1
              opacity: 0.8
              // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
            }
          },
          label: { //=============图形上的文本标签
            normal: {
              show: true, //是否显示标签。
              position: ['100%', '25%'], //标签的位置。['50%', '50%'] [x,y]
              textStyle: { //标签的字体样式
                color: '#6d7284', //字体颜色
                fontStyle: 'italic', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                fontWeight: 'bold', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                fontFamily: 'sans-serif', //文字的字体系列
                fontSize: 12, //字体大小
              }
            },
            emphasis: { //高亮状态

            }
          },
          edgeLabel: { //==============线条的边缘标签 
            normal: {
              show: false
            },
            emphasis: { //高亮状态

            }
          },
          //别名为nodes   name:影响图形标签显示,value:影响选中后值得显示,category:所在类目的index,symbol:类目节点标记图形,symbolSize:10图形大小
          //label:标签样式。
          data: this.data,
          // data: [
          //   {
          //     id: 1,
          //     category: 0,
          //     name: '设计初设',
          //     symbol: 'circle',
          //     value: 1,
          //     symbolSize: 15,
          //     nickname: '',
          //     level: '',
          //     boundary: '',
          //     link: ''
          //   },
          //   {
          //     id: 2,
          //     category: 0,
          //     name: '项目地名审核',
          //     symbol: 'circle',
          //     value: 2,
          //     symbolSize: 15
          //   },
          //   {
          //     id: 3,
          //     category: 0,
          //     name: '地名核准',
          //     symbol: 'circle',
          //     value: 3,
          //     symbolSize: 15
          //   },
          // ],
          categories: [ //symbol name：用于和 legend 对应以及格式化 tooltip 的内容。 label有效
            {
              name: '业务流程',
              symbol: 'rect',
              label: { //标签样式
              }
            }, {
              name: '业务系统',
              symbol: 'rect'
            }, {
              name: '组织机构',
              symbol: 'rect'
            }
            // , {
            //   name: '数据库',
            //   symbol: 'roundRect'
            // }, {
            //   name: '用户名',
            //   symbol: 'roundRect'
            // }
          ],
          links: this.links,
          // links: [ //edges是其别名代表节点间的关系数据。
          //   {
          //     source: 1,
          //     target: 0,
          //     symbolSize: [10, 0]
          //     // 这个表示连线的样式 第一个值代表连接到的那个箭头有多大，第二个
          //   },
          //   {
          //     source: 2,
          //     target: 1,
          //     symbolSize: [10, 0]
          //   },
          //   {
          //     source: 3,
          //     target: 2,
          //     symbolSize: [10, 0]
          //   }

          // ]
        }]
      };
      console.log('11111111', option.series)
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.on('mouseover', this.openOrFold);
      myChart.on('mouseout', this.closeOrFold);
    },
    //  搜索框输入
    remoteMethod (query) {
      console.log(query)
      this.$emit('remoteMethod', query)
    },
    //  搜索框选中  changeValue
    changeValue (value) {
      this.$emit('selectValue', value)

    },
    // //  鼠标移动到节点触发事件
    appendPath (params) { //拼接节点关系并显示在左下角，
      var myChart = echarts.init(document.getElementById('main'), 'macarons');
      var option = myChart.getOption();
      var series = option.series[params.seriesIndex]; //获取图表
      console.log('series', series);
      var nodesOption = series.data; //获取所有数据
      console.log('nodesOption', nodesOption);
      var links = series.links; //获取所有连线
      console.log('links', links);
      if (params.dataType == "node") { //dataType可以是edge(线条)或node(数据)
        var name = params.data.name;
        var categoryName = series.categories[params.data.category].name; //获取当前节点的图例名称
        // var str = `<div style="color:black;font-weight:900">${series.name} : ${params.data.name}</div>`;
        var str = '';
        console.log('当前数据', params.data);
        console.log('str', str);
        var yName = params.data.name ? `<div style="color:black;font-weight:700 ; padding-top: 10px;" >业务名称：${params.data.name}</div>` : ''
        var yLevel = params.data.secretLevel ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">业务密级：${params.data.secretLevel}</div>` : ''
        var ybusinessBoundary = params.data.businessBoundary ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">业务边界：${params.data.businessBoundary}</div>` : ''
        var registerTime = params.data.registerTime ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">注册时间：${params.data.registerTime}</div>` : ''
        var summary = params.data.summary ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">概述：${params.data.summary}</div>` : ''
        var version = params.data.version ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">版本：${params.data.version}</div>` : ''
        var label = params.data.label ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">标签：${params.data.label}</div>` : ''
        var link = params.data.link ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">子流程：<a href=${params.data.link}> ${params.data.link}</a></div>` : ''
        var xname = params.data.name ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">系统名称：${params.data.name}</div>` : ''
        var xDepartment = params.data.catalog_name ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">建设部门：${params.data.catalog_name}</div>` : ''
        var xTime = params.data.create_time ? `<div style="color:black;font-weight:700 ; padding-top: 10px;">汇交时间：${params.data.create_time}</div>` : ''
        var zname = params.data.name ? `<div style="color:black;font-weight:700; padding-top: 10px;">名称：${params.data.name}</div>` : ''
        var zSuperiorUnit = params.data.SuperiorUnit ? `<div style="color:black;font-weight:700; padding-top: 10px;">上级单位：${params.data.SuperiorUnit}</div>` : '<div style="color:black;font-weight:700; padding-top: 10px;">上级单位：无</div>'
        if (categoryName === '业务流程') {
          str = str + yName + yLevel + ybusinessBoundary + registerTime + label + summary + version + link
        } else if (categoryName === '业务系统') {
          str = str + xname + xDepartment + xTime
        } else if (categoryName === '组织机构') {
          str = str + zname + zSuperiorUnit;
        }
        return str;
      } else if (params.dataType == "edge") { //当鼠标停留在连线上时，暂不处理
        return "";
      }
    },
    //  鼠标移出节点事件
    closeOrFold (params) {
      console.log(1111)
      document.getElementById("main_1").innerHTML = ''
    },
    openOrFold (params) { //该事件会提示节点间关系
      console.log('节点关系', params)
      var str = this.appendPath(params);

      document.getElementById("main_1").innerHTML = str;
      return str;
    },
    //  获取所有数据
    getData () {
      //  获取关系数据
      apiHome.findCataAllRelation({ date: this.Versiontime, name: this.name }).then(res => {
        (res.data.data).map((value, index, array) => {
          if (value.symbolSize && typeof (value.length) != 'string') {
            value.symbolSize = JSON.parse(value.symbolSize)
          }
          return value
        })
        // res.data.data.map()
        this.links = res.data.data

        console.log('links', this.links)

        //  获取echart节点数据
        apiHome.findCataAll({ date: this.Versiontime, name: this.name }).then(res => {
          // console.log('11111111', option.series.data)
          //  过滤掉重复的name
          let arr = res.data.data
          var hash = {};
          arr = arr.reduce(function (item, next) {
            hash[next.name] ? '' : hash[next.name] = true && item.push(next);
            return item
          }, [])
          this.data = arr
          console.log('data', this.data)
          this.drawLine()
        })
        //  获取左边tab栏数据
        apiHome.findBusiData({ date: this.Versiontime, name: this.name }).then(res => {
          this.businessProcessData = res.data.data.busiData
          console.log('业务流程', this.businessProcessData)
          this.businessSystem = res.data.data.systemData
          console.log('业务系统', this.businessSystem)
          this.organization = res.data.data.OrgData
          console.log('组织机构', this.organization)
        })
      })


    }
  },
  destroyed () {

  }
}
</script>

<style scoped lang="less">
@import url("./home");
#home {
  width: 100%;
  height: 100%;
  // min-width: 1000px;
  display: flex;
  flex-direction: column;
  .homeTitle {
    height: 50px;
    padding: 0px 20px;
    line-height: 50px;
    border-bottom: 1px solid black;
    min-width: 1055px;
    h1 {
      font-size: 20px;
      margin-left: 50px;
      display: inline-block;
    }
    .homeTitleSearch {
      width: 300px;
      display: inline-block;
      float: right;
      padding: 0px 50px;
      .el-input {
        width: 70%;
      }
    }
    .homeTitleTime {
      display: inline-block;
      font-size: 15px;
      float: right;
    }
  }
  .homeMap {
    width: 100%;
    flex: 1;
  }
  #main {
    // overflow: auto;
  }
}
</style>
